HTML5
, styled with CSS3
, using express.js
framework of node.js
for backend and MongoDb
database for
Storage.
We've reached day 13th of our 30 days of node
and here we are with our first project tutorial in which we create a login system using HTML5 , CSS3 , bootstrap ,
node , express and mongodb. What's unique about this tutorial is that you get to learn everything from the
html and styles to complex technical topics like perform HMAC operation on password.
Please Note that encrypting passwords
with SHA is unsafe and we strongly recommend that you should not use it in production.
node.js
.
Let's start by creating a simple static form in HTML5
.
This form is having 5 fields :
Name :
It takes user name as input. Validations are not implemented here. Email :
It takes email id as input. Validations are implemented using HTML5 so, only valid emailID will work. Password :
It takes password as the input. Validations are not implemented. Phone :
It takes the contact number of user as input. Validations are not implemented. Submit :
When we click the submit button, the action
attribute of form tag will direct
the data to the sign_up
route of the backend app .
<html>
<head>
<title> Signup Form | nodejsera </title>
<!-- Including bootstrap v3.3.7 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Including Custom css -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br>
<br>
<br>
<div class="container" >
<div class="row">
<div class="col-md-3">
<!-- Blank DIV -->
</div>
<div class="col-md-6 main">
<!-- Form Tag starts here -->
<!-- Action attribute is the route on backend. Method is POST -->
<form action="/sign_up" method="post">
<h1> Signup form </h1>
<input class="box" type="text" name="name" id="name" placeholder="Enter your Name" required /><br>
<input class="box" type="email" name="email" id="email" placeholder="Enter your E-Mail " required /><br>
<input class="box" type="password" name="password" id="password" placeholder="Enter your Password " required/><br>
<input class="box" type="text" name="phone" id="phone" placeholder="Enter your Phone Number " required/><br>
<br>
<input type="submit" id="submitDetails" name="submitDetails" value="Submit Your Details" /><br>
</form>
</div>
<div class="col-md-3">
<!-- Blank DIV -->
</div>
</div>
</div>
</body>
</html>
success.html
page, otherwise the error message will be printed.
<html>
<head>
<title> Signup Form | nodejsera </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br>
<br>
<br>
<div class="container" >
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 main">
<h1> Signup Successful <br> Congratulations!!</h1>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
</html>
We are using simple CSS
for styling our Signup form. All the code here is self explanatory. Copy all this
in a file named style.css
.
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab');
.main{
padding:20px;
font-family: 'Josefin Slab', serif;
border : 2px solid #50d8a4;
border-radius: 15px;
}
.main h1{
font-size: 50px;
text-align:center;
font-family: 'Josefin Slab', serif;
color: #549978;
}
input{
font-family: 'Josefin Slab', serif;
width: 100%;
font-size: 30px;
padding: 12px 20px;
margin: 8px 0;
border: none;
border-bottom: 2px solid #50d8a4;
}
input[type=submit] {
font-family: 'Josefin Slab', serif;
width: 100%;
background-color: #549978;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 15px;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
input:hover {
font-family: 'Josefin Slab', serif;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid #549978;
}
input[type=submit]:hover {
font-family: 'Josefin Slab', serif;
width: 100%;
background-color: #549978;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 15px;
}
Now, let's move on to the crux of our application i.e. the backend. We are using express.js framework of node.js for handling the routes. You can learn more about express and mongodb in the links provided below respectively :
HMAC
where the algorithm which we are using is sha512
and the key is the phone
variable provided by the user. MongoDB
.
var new_db = "mongodb://localhost:27017/database_name";
db.collection("details")
success.html
page.
crypto
, path
are inbuilt packages , so we needn't to install them. Let's install the rest of the
packages :
express
npm install express --save
mongodb
npm install mongodb --save
server.js
file :
express
, mongodb
,
path
, body-parser
and crypto
var express = require('express');
var path = require('path');
var mongo = require('mongodb');
var bodyParser = require('body-parser');
var crypto = require('crypto');
var app = express();
//enter the name of the database in the end
var new_db = "mongodb://localhost:27017/database_name";
app.get('/',function(req,res){
res.set({
'Access-Control-Allow-Origin' : '*'
});
return res.redirect('/public/index.html');
}).listen(3000);
console.log("Server listening at : 3000");
app.use('/public', express.static(__dirname + '/public'));
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
var getHash = ( pass , phone ) => {
var hmac = crypto.createHmac('sha512', phone);
//passing the data to be hashed
data = hmac.update(pass);
//Creating the hmac in the required format
gen_hmac= data.digest('hex');
//Printing the output on the console
console.log("hmac : " + gen_hmac);
return gen_hmac;
}
/sign_up
route details :
// Sign-up function starts here. . .
app.post('/sign_up' ,function(req,res){
var name = req.body.name;
var email= req.body.email;
var pass = req.body.password;
var phone = req.body.phone;
var password = getHash( pass , phone );
var data = {
"name":name,
"email":email,
"password": password,
"phone" : phone
}
mongo.connect(new_db , function(error , db){
if (error){
throw error;
}
console.log("connected to database successfully");
//CREATING A COLLECTION IN MONGODB USING NODE.JS
db.collection("details").insertOne(data, (err , collection) => {
if(err) throw err;
console.log("Record inserted successfully");
console.log(collection);
});
});
console.log("DATA is " + JSON.stringify(data) );
res.set({
'Access-Control-Allow-Origin' : '*'
});
return res.redirect('/public/success.html');
});
server.js
using the following command :
> node server.js
In this chapter of 30 days of node tutorial series, We created our first project i.e signup application. We started with creating a simple static form with HTML5 and then styling that html form using css. After that we created our backend by using the express.js framework of node. Lastly, we stored all the data in the nosql database MongoDB.